{% extends 'base.html' %}

{% block title %}{{ restaurant.name }} - 餐厅详情{% endblock %}

{% block content %}
<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'order:restaurant_list' %}">餐厅列表</a></li>
            <li class="breadcrumb-item active">{{ restaurant.name }}</li>
        </ol>
    </nav>

    <div class="card mb-4">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">{{ restaurant.name }}</h2>
                <div>
                    <span class="badge bg-primary">评分: {{ restaurant.rating|default:"暂无" }}</span>
                    {% if restaurant.is_open %}
                        <span class="badge bg-success">营业中</span>
                    {% else %}
                        <span class="badge bg-secondary">已打烊</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    {% if restaurant.image %}
                        <img src="{{ restaurant.image.url }}" class="img-fluid rounded" alt="{{ restaurant.name }}">
                    {% else %}
                        <div class="bg-light text-center py-5 rounded">
                            <i class="fas fa-utensils fa-4x text-muted"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <h5 class="text-muted">餐厅信息</h5>
                        <hr>
                        <p><i class="fas fa-map-marker-alt me-2"></i><strong>地址:</strong> {{ restaurant.address }}</p>
                        <p><i class="fas fa-info-circle me-2"></i><strong>描述:</strong> {{ restaurant.description }}</p>
                        <p><i class="fas fa-phone me-2"></i><strong>联系电话:</strong> {{ restaurant.phone|default:"暂无" }}</p>
                        <p><i class="fas fa-clock me-2"></i><strong>营业时间:</strong> {{ restaurant.business_hours|default:"暂无" }}</p>
                    </div>

                    {% if restaurant.is_open %}
                    <div class="mb-3">
                        <h5 class="text-muted">下单</h5>
                        <hr>
                        <form method="post" action="{% url 'order:create_order' restaurant.id %}">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="food_name" class="form-label">选择菜品</label>
                                <select class="form-select" id="food_name" name="food_name" required>
                                    <option value="">请选择菜品</option>
                                    {% for dish in restaurant.dishes.all %}
                                        <option value="{{ dish.name }}" data-price="{{ dish.price }}">
                                            {{ dish.name }} - ¥{{ dish.price }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="quantity" class="form-label">数量</label>
                                <input type="number" class="form-control" id="quantity" name="quantity" min="1" value="1" required>
                            </div>
                            <button type="submit" class="btn btn-primary">提交订单</button>
                        </form>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 评分部分 -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">给餐厅评分</h5>
        </div>
        <div class="card-body">
            <form method="post" class="rating-form">
                {% csrf_token %}
                <div class="mb-3">
                    {{ form.rating.label_tag }}
                    <div class="rating">
                        {% with ''|center:5 as range %}
                        {% for _ in range %}
                            {% with forloop.counter as i %}
                            <input type="radio" id="star{{ 6|add:"-"|add:i }}" name="rating" value="{{ 6|add:"-"|add:i }}" 
                                   {% if restaurant.rating == 6|add:"-"|add:i %}checked{% endif %}>
                            <label for="star{{ 6|add:"-"|add:i }}"><i class="fas fa-star"></i></label>
                            {% endwith %}
                        {% endfor %}
                        {% endwith %}
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">提交评分</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .rating {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .rating input {
        display: none;
    }
    .rating label {
        cursor: pointer;
        padding: 5px;
        color: #ddd;
        font-size: 24px;
        transition: color 0.2s ease-in-out;
    }
    .rating label:hover,
    .rating label:hover ~ label,
    .rating input:checked ~ label {
        color: #ffd700;
    }
    .rating label:hover > i,
    .rating label:hover ~ label > i,
    .rating input:checked ~ label > i {
        transform: scale(1.1);
    }
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    .img-fluid {
        max-height: 400px;
        object-fit: cover;
        width: 100%;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const quantityInput = document.getElementById('quantity');
    const foodSelect = document.getElementById('food_name');
    
    function updateTotal() {
        const selectedOption = foodSelect.options[foodSelect.selectedIndex];
        if (selectedOption.value) {
            const price = parseFloat(selectedOption.dataset.price);
            const quantity = parseInt(quantityInput.value);
            const total = price * quantity;
            document.getElementById('total').textContent = `总价: ¥${total.toFixed(2)}`;
        }
    }

    if (quantityInput && foodSelect) {
        quantityInput.addEventListener('change', updateTotal);
        foodSelect.addEventListener('change', updateTotal);
    }
});
</script>
{% endblock %}
